<template>
  <el-container class="Box">
    <el-header class="head">
      <div class="left">
        <div class="headerImg" @click="centerDialogVisible = true">
          <img :src="userinfo.userHeader" alt="" />
        </div>
        <div class="info">
          <div class="name">小主：{{ userinfo.userName }}</div>
          <div class="limit">
            等级：{{
              userinfo.limit == 0
                ? "超级管理员"
                : userinfo.limit == 1
                ? "管理员"
                : "普通用户"
            }}
          </div>
        </div>
      </div>
      <div class="center" @click="goLogin">情不知所以、一往而情深</div>
      <div class="right">
        <el-badge :value="emailLen" class="item" type="danger">
          <div class="msg msg1" @click="gomsg">通知</div>
        </el-badge>
        <!-- <div class="msg msg1" @click="gomsg">通知</div> -->
        <div class="msg msg2" @click="goluck">结缘</div>
        <div class="time">{{ time }}</div>
      </div>
    </el-header>
    <el-container class="Abox">
      <el-aside class="side">
        <el-menu
          style="height: 100%"
          :unique-opened="true"
          router
          text-color="#FFC1C1"
          active-text-color="#FF3030"
        >
          <div v-for="item in aside" :key="item.id">
            <el-submenu :index="item.router" v-show="isShowItem(item.name)">
              <template #title>
                <i :class="item.icon"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item
                v-for="items in item.item"
                :key="items.id"
                :index="items.itemrouter"
              >
                <template #title>
                  <i :class="items.icon"></i>
                  <span>{{ items.itemname }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </div>
        </el-menu>
      </el-aside>
      <el-main class="main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

  <el-dialog v-model="centerDialogVisible" width="40%" :modal="true" center>
    <div class="userBox">
      <div class="img">
        <img
          :src="userinfo.userHeader"
          style="width:100px;height:100px;border-radius:50%;"
          alt=""
        />
      </div>
      <div class="username">
        <el-input
          class="name"
          placeholder="请输入内容"
          v-model="userinfo.userName"
          :disabled="core.userN"
        >
          <template #prepend>尊姓大名：</template>
        </el-input>
        <span v-if="core.userN" class="change" @click="changeCore('N')">{{
          core.userN ? "修改" : "确定"
        }}</span>
        <span v-if="!core.userN" class="change" @click="changeCore('yes')">{{
          core.userN ? "修改" : "确定"
        }}</span>
      </div>
      <div class="username">
        <el-input
          class="name"
          placeholder="请输入内容"
          v-model="userinfo.user"
          :disabled="core.userZ"
        >
          <template #prepend>当前账号：</template>
        </el-input>
        <!-- <span class="change">修改</span> -->
      </div>
      <div class="username">
        <el-input
          class="name"
          placeholder="请输入内容"
          v-model="userinfo.tel"
          :disabled="core.userT"
        >
          <template #prepend>联系方式：</template>
        </el-input>
        <span v-if="core.userT" class="change" @click="changeCore('T')">{{
          core.userT ? "修改" : "确定"
        }}</span>
        <span v-if="!core.userT" class="change" @click="changeCore('yes')">{{
          core.userT ? "修改" : "确定"
        }}</span>
      </div>
      <div class="username">
        <el-input
          class="name"
          placeholder="请输入内容"
          v-model="userinfo.email"
          :disabled="core.userM"
        >
          <template #prepend>电子邮箱：</template>
        </el-input>
        <span v-if="core.userM" class="change" @click="changeCore('M')">{{
          core.userM ? "修改" : "确定"
        }}</span>
        <span v-if="!core.userM" class="change" @click="changeCore('yes')">{{
          core.userM ? "修改" : "确定"
        }}</span>
      </div>
      <div class="username">
        <el-input
          class="name"
          placeholder="请输入内容"
          v-model="userinfo.createTime"
          :disabled="core.userC"
        >
          <template #prepend>注册时间：</template>
        </el-input>
        <!-- <span class="change">修改</span> -->
      </div>
      <div class="username" style="justify-content: space-around">
        <span class="name"
          >权限等级：{{
            userinfo.limit == 0
              ? "超级管理员"
              : userinfo.limit == 1
              ? "管理员"
              : "普通用户"
          }}</span
        >
        <span class="name"
          >积分：{{ userinfo.integral }}
          <el-tooltip
            class="item"
            effect="dark"
            content="发表说说+15积分"
            placement="top-start"
          >
            <i class="el-icon-question"></i>
          </el-tooltip>
        </span>
      </div>
      <div class="username" style="justify-content: center; border: 0">
        <span class="name" style="color: pink">有 你 真 好</span>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import homeJs from "./home.js";
import { onMounted, provide, toRefs } from "vue";
export default {
  name: "login",
  setup() {
    let {
      status,
      methodFun: {
        goLogin,
        changeCore,
        isShowItem,
        integralAward,
        getInfo,
        goluck,
        gomsg,
     
      },
    } = homeJs();
    let { centerDialogVisible, time, core, userinfo, aside,emailLen } = toRefs(status);
    onMounted(() => {
      // getInfo();
      integralAward();
    });

    provide("getinfo", getInfo);
    return {
      goLogin,
      changeCore,
      isShowItem,
      integralAward,
      getInfo,
      goluck,
      gomsg,
      centerDialogVisible,
      time,
      core,
      userinfo,
      aside,
      emailLen
    };
  },
};
</script>

<style lang="less" scoped>
/deep/.el-menu {
  width: 230px;
  background-color: transparent;
  border-right: 2px solid #ff6eb4;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.userBox {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  .img {
    width: 100%;
    display: flex;
    padding-bottom: 14px;
    justify-content: center;
  }
  .username {
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    .name {
      margin-left: 12px;
    }
    .change {
      width: 50px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      font-size: 14px;
      color: #ff6eb4;
      border: 1px solid #ff6eb4;
      margin-right: 12px;
      margin-left: 12px;
      cursor: pointer;
    }
  }
}
.Box {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../../../static/images/2.png");
  background-size: 100% 100%;
  object-fit: cover;
  display: flex;
  flex-direction: column;
  background-attachment: fixed;
  overflow-y: auto;
  .head {
    width: 100%;
    height: 80px !important;
    box-sizing: border-box;
    padding: 0px 20px;
    // background-color: antiquewhite;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #ff6eb4;
    .left {
      height: 100%;
      display: flex;
      align-items: center;
      .headerImg {
        height: 60px;
        width: 60px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .info {
        .name {
          line-height: 30px;
          color: #ff6eb4;
          font-size: 16px;
          // text-shadow: 0px 0px red 2px;
        }
        .limit {
          color: #fffacd;
          // text-shadow: 0px 0px red 2px;
        }
      }
    }
    .center {
      font-size: 28px;
      font-family: "kaiti";
      background: linear-gradient(
        to right,
        pink,
        #f5003d,
        red,
        #ff3366,
        #ff6633
      );
      color: transparent;
      background-clip: text;
      cursor: pointer;
    }
    .right {
      display: flex;
      align-items: center;
      .msg {
        color: #444;
        cursor: pointer;
        padding: 6px 12px;
        border: 1px solid pink;
        background: linear-gradient(
          to right,
          pink,
          #f5003d,
          red,
          #ff3366,
          #ff6633
        );
        color: transparent;
        background-clip: text;
        &:hover {
          box-shadow: 0px 0px 10px 1px #f5003d;
          text-shadow: 0px 0px 10px pink;
        }
      }
      .msg1{
        position: relative;
        top: -5px;
      }
      .time {
        margin-left: 30px;
        font-size: 16px;
        color: #ba55d3;
        font-weight: 500;
      }
    }
  }
  .Abox {
    flex: 1;
    width: 100%;
    display: flex;
    .side {
      width: 232px !important;
      height: 100%;
    }
    .main {
      flex: 1;
      height: 100%;
      background-color: transparent;
      &::-webkit-scrollbar {
        width: 4px;
        height: 4px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #d9d9d9;
        border-radius: 2px;
      }
    }
  }
}
</style>
